<template>
  <div>
    <div class="orderData">
      <div class="title">我的订单</div>

      <el-table
        :data="list"
        style="width: 100%"
        header-cell-class-name="myTableHeader"
        cell-class-name="myTableCell"
      >
        <el-table-column prop="in_id" label="编号"> </el-table-column>
        <el-table-column prop="pay_param" label="商品名称"> </el-table-column>
        <el-table-column prop="pay_id" label="订单编号"></el-table-column>
        <el-table-column prop="pay_type" label="支付方式"> </el-table-column>
        <el-table-column prop="pay_money" label="支付金额"> </el-table-column>
        <el-table-column prop="pay_time" label="付款时间"></el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page.sync="currentpage"
      background
      layout="prev, pager, next"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
import { order_list } from "@/api/index";
export default {
  data() {
    return {
      total: 0,
      currentpage: 1,
      tableData: [],
    };
  },
  computed: {
    list() {
      return this.tableData.slice(
        (this.currentpage - 1) * 10,
        this.currentpage * 10
      );
    },
  },
  async mounted() {
    const res = await order_list({ page: 1, limit: 999 });
    this.tableData = res.data.filter((res) => res.pay_status == "已支付");

    this.total = this.tableData.length;
    console.log(this.total, this.tableData.length);
  },
};
</script>

<style scoped lang="scss">
::v-deep .myTableHeader {
  background-color: #ebeff2 !important;
  text-align: center;
}

::v-deep .myTableCell {
  text-align: center;
}

.orderData {
  .title {
    margin: 15px 0;
    font-size: 18px;
  }
}
</style>
